<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>note-code</title>
	<style>
		:root {
			/* 
			 * 100vw 375px
			 * ?     100px
			 */
			font-size: 26.6666667vw;
		}

		div.title {
			width: 1rem;
			height: 1rem;
			font-size: 0.16rem;
			background-color: skyblue;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="title">网易新闻APP</div>
	</div>

	<script>
		window.addEventListener('resize', initResize)

		initResize()
		function initResize() {
			const elHtml = document.querySelector('html')
			// 获取当前屏幕宽
			const innerWidth = window.innerWidth
			// 动态计算出font-size的值（以100px为标准：使用的时候 0.01rem === 1px）
			elHtml.style.fontSize = innerWidth / 10 + 'vw'
		}
	</script>
</body>

</html>